<template>
  <div style="background-color: #f7f7f7">
    <div class="register-wrapper">
      <el-form ref="form" label-width="110px" :rules="rules" :model="form">
        <el-form-item label="联系人名称：" prop="contactName">
          <el-input
            type="text"
            v-model="form.contactName"
            placeholder="请输入联系人名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业名称：" prop="firmName">
          <el-input
            type="text"
            v-model="form.firmName"
            placeholder="请输入企业名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业类型：" prop="firmType">
          <el-select v-model="form.firmType" placeholder="请选择" :popper-append-to-body="false">
            <el-option
              v-for="item in firmTypeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="营业执照：" prop="businessLicense" style="margin-bottom: 20px">
          <ImageUpload :imgSrc="require('@/assets/img/icon-upload-1.png')" v-model="form.businessLicense"></ImageUpload>
        </el-form-item>
      </el-form>

      <el-button type="primary" class="submit-btn" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import LoginHeader from "@/components/LoginHeader.vue";
import PageFooter from "@/components/PageFooter.vue";
import { firmType, const2Arr } from "@/consts/index.js";
import { becomeFirm } from '@/api/user.js'
export default {
  name: "Register",
  components: {
    LoginHeader,
    PageFooter,
  },
  data() {
    return {
      rules: {
        contactName: [{ required: true, message: "联系人名称不能为空", trigger: "blur" }],
        firmName: [{ required: true, message: "企业名称不能为空", trigger: "blur" }],
        firmType: [{ required: true, message: "企业类型不能为空", trigger: "blur" }],
        businessLicense: [
          { required: true, message: "营业执照不能为空", trigger: "blur" },
        ]
      },
      form: {
        firmName: "",
        firmType: "",
        businessLicense: "",
        contactName: "",
      },
      firmType,
      firmTypeArr: const2Arr(firmType)
    };
  },

  methods: {
    submit() {
      this.$refs["form"].validate((valid) => {
        if(valid){
          becomeFirm(this.form).then(res => {
            this.$modal.msgSuccess(res.message)
          })
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.register-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #ffffff;
  border-radius: 0px;
  padding: 60px 0;

  .tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;

    .tab {
      padding: 0 60px;
      font-weight: 400;
      font-size: 22px;
      color: #333333;
      cursor: pointer;
    }

    .active {
      font-weight: bold;
      font-size: 22px;
      color: #fe5a13;
    }

    .underline {
      width: 40px;
      height: 6px;
      background: #fe5a13;
      border-radius: 3px;
      margin-top: 20px;
    }
  }
}

::v-deep .el-form-item__label {
  line-height: 50px;
  font-size: 16px;
  width: 120px;
}

// 设置文本框长度
::v-deep .el-input__inner {
  width: 548px;
  height: 50px;
  font-size: 16px;
}

// 上传图片占位图的尺寸
::v-deep .el-upload--picture-card {
  width: 200px;
  height: 130px;
}

::v-deep .el-select-dropdown__item {
  font-size: 16px;
}

.submit-btn {
  width: 548px;
  height: 60px;
  border-radius: 10px;
  margin: 70px 0 30px 0;
  font-size: 20px;
}
</style>
